
import React, { FC } from 'react';
import { SwipeAction, List, ActionSheet, Button, Toast, SearchBar } from 'antd-mobile-v2';
import Avatar from '@/components/avatar';
import classnames from 'classnames';
import styles from './index.module.less';
import { DeleteOutsideUser } from '@/services/member';
interface Item {
  item: {
    [propname: string]: any;
  };
  index: number;
  dataList: {
    [propname: string]: any;
  };
  [propname: string]: any;
}

const SwipeActionItem: FC<Item> = (props) => {

  const { index, item, dataList, ChangMembers } = props;

  const rightBtns = (id: string) => {
    return [
      {
        text: '修改',
        onPress: () => onEdit(id),
        style: { backgroundColor: '#C7C7CC', color: 'white', fontSize: '18px', padding: '7px' }
      },
      {
        text: '删除',
        onPress: () => showActionSheet(id),
        style: { backgroundColor: '#FF3A30', color: 'white', fontSize: '18px', padding: '7px' }
      }
    ];
  };

  const onOpen = (id: string) => {
    console.log('global open', id);
  };

  const onClose = () => {
    console.log('global close');
  };

  const onEdit = (id: string) => {
    props.history.push(`/member/edit/${id}`);
  };
  const onClick = (id: string) => {
    props.history.push(`/member/detail/${id}`);
  };

  // 显示删除-确认模态框
  const showActionSheet = (id: string) => {
    const BUTTONS = ['删除', '取消'];
    const memberT = dataList.filter((item: any) => id === item.id)?.[0];
    const nameT = memberT.openAccountName || '';
    ActionSheet.showActionSheetWithOptions(
      {
        options: BUTTONS,
        cancelButtonIndex: BUTTONS.length - 1,
        destructiveButtonIndex: BUTTONS.length - 2,
        message: `确认删除${nameT}？`,
        className: styles.actionConfirmModal
        // maskClosable: false
      },
      async (buttonIndex) => {
        if (buttonIndex === 0) {
          const dataDeld = dataList.filter((item: any) => id !== item.id);
          ChangMembers(dataDeld);
          // if (!isAction) {
          //   isAction = true;
          const isSuccess = await DeleteOutsideUser(id);
          if (isSuccess.status === 200) {
            Toast.success('删除人员信息成功');
            // AppToast({ type: 1, message: isSuccess.message });
          }
          // }
        } else {
          console.log('cancel');
        }
      }
    );
  };


  return (
    <List key={index} className={styles.memberListItem}>
      <SwipeAction
        style={{ backgroundColor: 'gray' }}
        right={rightBtns(item.id)}
        onOpen={() => onOpen(item.id)}
        onClose={() => onClose()}
      >
        <List.Item
          onClick={() => onClick(item.id)}
        >
          <div className={classnames(styles.icon, styles.desc)}>
            <Avatar name={item.openAccountName} />
          </div>
          <span className={styles.name}>{item.openAccountName || ''}</span>
          {
            item?.verification === '0' ? <span className={classnames(styles.name, styles.check)}>校验异常</span> : ''
          }
        </List.Item>
      </SwipeAction>
    </List>
  );
};


export default SwipeActionItem;